<template>
  <div class="agent">
    <el-container>
      <el-header >
        <div :class="pathMiddle">
           <!-- <div class="logo  fl">
            <img :src="userLogo" alt="" class="img">
          </div> -->
          <div class="logo  fl">
            <img src="../assets/img/20191017101604.png" alt="">
          </div>
          <div class="fullName fl">
            <span>武汉信合红谷知识产权代理事务所</span>
          </div>
          <!--  -->
          <el-popover
            v-if="$route.path != '/user/apply'"
            placement="bottom"
            width="144"
            popper-class='option-menu'
            :visible-arrow='false'
            trigger="hover">
            <div class="option fr" @click="option" slot="reference"></div>
            <ul>
              <li>
                <router-link to='/user/home/recommend'>我的推荐</router-link>
                <div class="arrow"></div>
              </li>
              <li>
                <router-link to='/user/home/editInformation'>修改资料</router-link>
              </li>
              <li>
                <router-link to='/user/home/editPhone'>修改号码</router-link>
              </li>
              <li>
                <router-link to='/user/home/editPassword'>修改密码</router-link>
              </li>
              <li>
                <router-link to='/user/home/feedBack'>意见反馈</router-link>
              </li>
              <li>
                <span @click='exit'>退出</span>
              </li>
            </ul>

          </el-popover>
          <el-button class="applyBtn" v-if="$route.path != '/user/apply'" @click="applyBtn">快速申请</el-button>
          <el-button class="applyBtn" v-else @click="backHome">返回</el-button>
        </div>
       
      </el-header>
      <el-main class="">
        <nuxt-child />
      </el-main>
      <el-footer>
        <p class="record tc">{{record}}</p>
        <div class="company tc">
          <a href="" class="company_logo"></a>
          <span class="company_text">武汉溟宇科惠知识产权服务有限公司</span>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import {RECORD} from '../util/config'
export default {
  data () {
    return {
      record: RECORD,
      userLogo: require('~/assets/img/20191017101604.png')
    }
  },
  computed: { 
    pathMiddle () {
      let path = this.$route.path
      if (path.indexOf('/user/news') != '-1' 
          || path.indexOf('/user/myApply') != '-1'
          || path.indexOf('/user/myPurse') != '-1'
          || path.indexOf('/user/apply') != '-1') {
        return 'newsMiddle clearfloat head'
      } else if (path.indexOf('/user/rank') != '-1') {
        return 'rankMiddle clearfloat head'
      } else if (path.indexOf('/user/myFiles') != '-1'
      || path.indexOf('/user/myPay') != '-1') {
        return 'fileMiddle clearfloat head'
      } 
      return 'middle clearfloat head'
    }
  },
  created () {
    // console.log(this.$store.state.user)
  },
  methods: {
    // 快速申请按钮
    applyBtn(){
      this.$router.push('/user/apply')
    },
    backHome(){
      this.$router.go(-1)
    },
    option () {

    },
  //退出登录
	exit() {
		let that = this;
		this.$confirm("是否退出登录?", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			center: true
		})
    .then(() => {
        let url = this.$store.state.user.role_id == 5 ? '/login?type=2' : '/admin/login'
        if (this.$route.name.indexOf('agentImprove') > -1) {
          url = '/'
        }
        this.$store.commit("delToken")
        this.$cookies.remove("token")
        this.$store.commit("delUser")
        this.$cookies.remove("user")
        if(process.client) {
          window.localStorage.setItem('autoLogin', JSON.stringify(false))
        }
        this.$router.push({
          path: url
        });
      })
      .catch(() => {
      })
	},
  }
}
</script>

<style lang="less">
  .agent {
    width: 100%;
    height: 100%;
    .middle {
      width: 877px;
      margin: 0 auto;
    }
    .newsMiddle {
      width: 90%;
      margin: 0 auto;
    }
    .rankMiddle {
      width: 853px;
      margin: 0 auto;
    }
    .fileMiddle{
      width: 90%;
      margin: 0 auto;
    }
    .el-container {
      width: 100%;
      height: 100%;
      background:rgba(244,247,255,1);
      .el-header {
        padding: 0;
        width:100%;
        height:90px !important;
        background:rgba(255,255,255,1);
        .head {
          height: 100%;
        }
        .logo {
          height: 50px;
          width: 50px;
          margin-top: 20px;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .fullName {
          font-size:24px;
          color:rgba(27,27,27,1);
          line-height: 90px;
        }
        .applyBtn{
          margin-top: 25px;
          float: right;
          margin-right: 15px;
          font-size: 15px;
        }
        .option {
          width: 27px;
          height: 27px;
          margin-top: 30px;
          background:url('../assets/img/图标.png') no-repeat;
          background-position:-173px -32px;
          cursor:pointer; 
        }
        
      }
      .el-main {
        padding:20px 0 0 0;
        
      }
      .el-footer {
        height: 114px !important;
        padding-top: 20px;
        font-size: 15px;
        color:rgba(51,51,51,1);
        .record {
          
        }
        .company {
          margin-top: 20px;
          .company_logo {
            display: inline-block;
            width: 48px;
            height: 22px;
            background:url('../assets/img/图标.png') no-repeat;
            background-position:-282px -316px;
          }
          .company_text {
            margin-left: 19px;
            display: inline-block;
            vertical-align: top;
          }
        }
        
      }
    }

  }
  .option-menu {
    padding: 0;
    ul {
      li {
        list-style: none;
        line-height: 40px;

        text-align: center;
        a,span{
          color: #565656;
          display: block;
          width: 100%;
          height: 100%;
          cursor:pointer; 
        }
        .arrow {
          top: -18px;
          left: 70.5px;
          margin-right: 3px;
          border-top-width: 0;
          border-bottom-color: #EBEEF5;
          position: absolute;
        }
        .arrow::after {
          content: " ";
          border-width: 8px;
          -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
          filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          border-color: #fff;
          border-style: solid;
          top: 10px;
          margin-left: -6px;
          border-top-width: 0;
          border-bottom-color: #FFF;
        }
      }
      li:hover {
        background: #4e97d6;
        position: relative;
        a,span {
          color: #fff;
  
        }
        
        .arrow::after {
          border-bottom-color: #4e97d6;
        }
      }
      li:first-child {
        position: relative;
      }
    }

  }
</style>